
import { Input } from '@/components/ui/input';
import { AccordionItem, AccordionTrigger, Accordion, AccordionContent } from '@/components/ui/accordion';
import { Badge } from '@/components/ui/badge';
import MenuToggle from '../components/MenuToggle';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { HelpCircle, ChevronDown, FileText, ChevronRight, ExternalLink, MessageCircle, Mail, Star, Book, Phone, Video, Search, ThumbsUp, ThumbsDown, Download } from 'lucide-react';
import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
const Help = ({ toggleSidebar }) => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');

  // 帮助分类
  const categories = [
    { id: 'all', name: '全部', icon: Book },
    { id: 'getting-started', name: '快速入门', icon: Star },
    { id: 'file-management', name: '文件管理', icon: FileText },
    { id: 'user-guide', name: '用户指南', icon: Book },
    { id: 'troubleshooting', name: '故障排除', icon: HelpCircle },
    { id: 'api', name: 'API 文档', icon: ExternalLink }
  ];

  // 常见问题
  const faqs = [
    {
      id: 1,
      category: 'getting-started',
      question: '如何开始使用筋斗云？',
      answer: '首先注册账户，然后登录系统。您可以立即开始上传文件、创建文件夹，并与团队成员共享文件。建议先查看快速入门指南。',
      helpful: 15,
      notHelpful: 2
    },
    {
      id: 2,
      category: 'file-management',
      question: '支持哪些文件格式？',
      answer: '筋斗云支持几乎所有文件格式，包括文档（PDF、Word、Excel、PPT）、图片（JPG、PNG、GIF）、视频（MP4、AVI）、音频（MP3、WAV）等。单个文件最大支持 100MB。',
      helpful: 23,
      notHelpful: 1
    },
    {
      id: 3,
      category: 'file-management',
      question: '如何共享文件给其他用户？',
      answer: '选择要共享的文件，点击"共享"按钮，输入接收者的邮箱地址或选择团队成员，设置权限（查看/编辑），然后发送邀请。',
      helpful: 18,
      notHelpful: 0
    },
    {
      id: 4,
      category: 'user-guide',
      question: '如何设置文件夹权限？',
      answer: '右键点击文件夹，选择"权限设置"，您可以为不同用户或用户组设置读取、写入、删除等权限。管理员可以设置更详细的权限控制。',
      helpful: 12,
      notHelpful: 3
    },
    {
      id: 5,
      category: 'troubleshooting',
      question: '上传文件失败怎么办？',
      answer: '请检查：1) 网络连接是否正常；2) 文件大小是否超过限制；3) 存储空间是否充足；4) 文件格式是否支持。如问题持续，请联系技术支持。',
      helpful: 8,
      notHelpful: 1
    },
    {
      id: 6,
      category: 'troubleshooting',
      question: '忘记密码怎么办？',
      answer: '在登录页面点击"忘记密码"，输入您的邮箱地址，系统会发送重置密码的链接到您的邮箱。按照邮件中的指引重置密码即可。',
      helpful: 25,
      notHelpful: 0
    }
  ];

  // 帮助资源
  const resources = [
    {
      id: 1,
      title: '快速入门指南',
      description: '5分钟了解筋斗云的基本功能',
      type: 'guide',
      icon: Book,
      url: '#'
    },
    {
      id: 2,
      title: '视频教程',
      description: '观看详细的操作演示视频',
      type: 'video',
      icon: Video,
      url: '#'
    },
    {
      id: 3,
      title: 'API 文档',
      description: '开发者集成接口文档',
      type: 'api',
      icon: ExternalLink,
      url: '#'
    },
    {
      id: 4,
      title: '用户手册',
      description: '完整的功能使用说明',
      type: 'manual',
      icon: Download,
      url: '#'
    }
  ];

  // 联系方式
  const contacts = [
    {
      id: 1,
      title: '在线客服',
      description: '工作日 9:00-18:00',
      icon: MessageCircle,
      action: '开始对话',
      available: true
    },
    {
      id: 2,
      title: '技术支持',
      description: 'support@jindouyun.com',
      icon: Mail,
      action: '发送邮件',
      available: true
    },
    {
      id: 3,
      title: '客服热线',
      description: '400-123-4567',
      icon: Phone,
      action: '拨打电话',
      available: true
    }
  ];

  // 过滤FAQ
  const filteredFaqs = faqs.filter(faq => {
    const matchesSearch = faq.question.toLowerCase().includes(searchQuery.toLowerCase()) ||
                         faq.answer.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'all' || faq.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  const handleHelpful = (faqId, isHelpful) => {
    // 这里应该调用API记录用户反馈
    console.log(`FAQ ${faqId} marked as ${isHelpful ? 'helpful' : 'not helpful'}`);
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-600 rounded-xl flex items-center justify-center">
                  <HelpCircle className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    帮助中心
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    获取使用帮助和技术支持
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：搜索 */}
            <div className="relative w-96">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-material-grey-500" />
              <Input
                placeholder="搜索帮助内容..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 container mx-auto px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* 左侧：分类导航 */}
          <div className="lg:col-span-1">
            <Card>
              <CardHeader>
                <CardTitle className="text-lg">帮助分类</CardTitle>
              </CardHeader>
              <CardContent className="p-0">
                <div className="space-y-1">
                  {categories.map((category) => {
                    const IconComponent = category.icon;
                    return (
                      <button
                        key={category.id}
                        onClick={() => setSelectedCategory(category.id)}
                        className={`w-full flex items-center space-x-3 px-4 py-3 text-left hover:bg-material-grey-50 transition-colors ${
                          selectedCategory === category.id 
                            ? 'bg-primary/10 text-primary border-r-2 border-primary' 
                            : 'text-material-grey-700'
                        }`}
                      >
                        <IconComponent className="w-4 h-4" />
                        <span className="font-medium">{category.name}</span>
                      </button>
                    );
                  })}
                </div>
              </CardContent>
            </Card>

            {/* 联系我们 */}
            <Card className="mt-6">
              <CardHeader>
                <CardTitle className="text-lg">联系我们</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {contacts.map((contact) => {
                  const IconComponent = contact.icon;
                  return (
                    <div key={contact.id} className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
                          <IconComponent className="w-4 h-4 text-primary" />
                        </div>
                        <div>
                          <p className="font-medium text-material-grey-900">{contact.title}</p>
                          <p className="text-sm text-material-grey-600">{contact.description}</p>
                        </div>
                      </div>
                      <Button variant="outline" size="sm">
                        {contact.action}
                      </Button>
                    </div>
                  );
                })}
              </CardContent>
            </Card>
          </div>

          {/* 右侧：主要内容 */}
          <div className="lg:col-span-3 space-y-6">
            {/* 帮助资源 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {resources.map((resource) => {
                const IconComponent = resource.icon;
                return (
                  <Card key={resource.id} className="hover:shadow-material-2 transition-shadow cursor-pointer">
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <div className="w-12 h-12 bg-gradient-to-br from-primary/20 to-primary/30 rounded-xl flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-primary" />
                        </div>
                        <div className="flex-1">
                          <h3 className="font-semibold text-material-grey-900 mb-2">{resource.title}</h3>
                          <p className="text-sm text-material-grey-600 mb-3">{resource.description}</p>
                          <Button variant="outline" size="sm">
                            查看详情
                            <ChevronRight className="w-4 h-4 ml-1" />
                          </Button>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                );
              })}
            </div>

            {/* 常见问题 */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <HelpCircle className="w-5 h-5" />
                  <span>常见问题</span>
                  <Badge variant="secondary">{filteredFaqs.length}</Badge>
                </CardTitle>
              </CardHeader>
              <CardContent>
                {filteredFaqs.length > 0 ? (
                  <Accordion type="single" collapsible className="space-y-2">
                    {filteredFaqs.map((faq) => (
                      <AccordionItem key={faq.id} value={faq.id.toString()} className="border border-material-grey-200 rounded-lg px-4">
                        <AccordionTrigger className="hover:no-underline">
                          <div className="flex items-center space-x-3 text-left">
                            <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                              <span className="text-sm font-medium text-primary">Q</span>
                            </div>
                            <span className="font-medium text-material-grey-900">{faq.question}</span>
                          </div>
                        </AccordionTrigger>
                        <AccordionContent className="pt-4">
                          <div className="ml-11 space-y-4">
                            <div className="flex items-start space-x-3">
                              <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center flex-shrink-0">
                                <span className="text-sm font-medium text-green-600">A</span>
                              </div>
                              <p className="text-material-grey-700 leading-relaxed">{faq.answer}</p>
                            </div>
                            
                            {/* 反馈按钮 */}
                            <div className="ml-11 flex items-center space-x-4 pt-2 border-t border-material-grey-100">
                              <span className="text-sm text-material-grey-600">这个回答有帮助吗？</span>
                              <div className="flex items-center space-x-2">
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleHelpful(faq.id, true)}
                                  className="text-green-600 hover:text-green-700 hover:bg-green-50"
                                >
                                  <ThumbsUp className="w-4 h-4 mr-1" />
                                  有用 ({faq.helpful})
                                </Button>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => handleHelpful(faq.id, false)}
                                  className="text-red-600 hover:text-red-700 hover:bg-red-50"
                                >
                                  <ThumbsDown className="w-4 h-4 mr-1" />
                                  无用 ({faq.notHelpful})
                                </Button>
                              </div>
                            </div>
                          </div>
                        </AccordionContent>
                      </AccordionItem>
                    ))}
                  </Accordion>
                ) : (
                  <div className="text-center py-12">
                    <div className="w-24 h-24 mx-auto mb-4 bg-material-grey-200 rounded-full flex items-center justify-center">
                      <Search className="w-8 h-8 text-material-grey-500" />
                    </div>
                    <h3 className="text-lg font-medium text-material-grey-700 mb-2">
                      未找到相关问题
                    </h3>
                    <p className="text-material-grey-500 mb-4">
                      尝试使用不同的关键词搜索，或联系我们的客服团队
                    </p>
                    <Button>
                      <MessageCircle className="w-4 h-4 mr-2" />
                      联系客服
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* 仍需帮助 */}
            <Card className="bg-gradient-to-r from-primary/5 to-primary/10 border-primary/20">
              <CardContent className="p-6">
                <div className="text-center">
                  <div className="w-16 h-16 bg-primary/20 rounded-full flex items-center justify-center mx-auto mb-4">
                    <MessageCircle className="w-8 h-8 text-primary" />
                  </div>
                  <h3 className="text-xl font-semibold text-material-grey-900 mb-2">
                    仍然需要帮助？
                  </h3>
                  <p className="text-material-grey-600 mb-6">
                    我们的客服团队随时为您提供支持，解答您的疑问
                  </p>
                  <div className="flex flex-col sm:flex-row gap-3 justify-center">
                    <Button className="bg-primary hover:bg-primary-600">
                      <MessageCircle className="w-4 h-4 mr-2" />
                      在线客服
                    </Button>
                    <Button variant="outline">
                      <Mail className="w-4 h-4 mr-2" />
                      发送邮件
                    </Button>
                    <Button variant="outline">
                      <Phone className="w-4 h-4 mr-2" />
                      电话支持
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </>
  );
};

export default Help;
